<!--
 * @Descripttion: 签证列表页
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-23 15:07:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-24 15:52:18
-->
<template>
  <div class="all-box">
    <div class="title">
      签证产品
    </div>
    <div class="tape"></div>
    <div class="tabs">
      <ListTabs>
        <AdvancedSearch class="search" />
        <div class="button-line">
          <AddSource />
          <button class="delete">批量删除</button>
          <!-- <BatchOperation></BatchOperation> -->
          <label>查询到2000条数据</label>
        </div>
        <div
          slot="content"
          class="list-content"
        >
          <p class="title">
            <input
              type="checkbox"
              class="all-checkbox"
            >
            <span>签证信息</span>
            <span>状态</span>
          </p>
          <ul>
            <li
             class="list-item"
            >
              <input type="checkbox">
              <div class="info">
                <div class="item-title">
                  <label class="title-label">旅游长签</label>
                  <span>北京澳大利亚团签</span>
                </div>
                <div class="label">
                  <span class="place">[奥地利]</span>
                  <label class="yellow-label">需面试</label>
                  <label class="blue-label">简化材料</label>
                </div>
                <div class="describe">
                  <span>编号：581323</span>
                  <span>
                    负责人：
                      <span class="person">葛二蛋</span>
                  </span>
                  <span>归属公司：成都华程</span>
                </div>
              </div>
              <div class="status">
                <Switch
                  :configValue="configValue"
                  class="switch"
                >
                </Switch>
                <button class="delete-text">移除签证</button>
              </div>
            </li>
          </ul>
        </div>
      </ListTabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import ListTabs from '../../components/common/tabs/ListTabs.vue'
import AdvancedSearch from '../../components/common/AdvancedSearch.vue'
import AddSource from '../../components/business/AddSource.vue'
import BatchOperation from '../../components/business/BatchOperation.vue'
import Switch from '../../components/common/Switch.vue'

export default defineComponent({
  components: {
    ListTabs, // 列表tabs
    AdvancedSearch, // 搜索
    AddSource, // 新增资源
    BatchOperation, // 批量操作
    Switch
  },
  setup() {
    const methods = reactive({
      activeName: '',
      tabList: [
        '全部',
        '在售',
        '下线',
        '创建中',
        '回收站',
      ],
      configValue: {
        openText: '在售',
        closeText: '下线',
        width: 60
      },
      handleClick() {
        console.log(111)
      }
    })

    return {
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../style/globle-color';
.all-box {
  background-color: #fff;
}
.title {
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  padding-left: 30px;
  margin-top: 20px;
}

.tape {
  background-color: #F0F3EF;
  width: 100%;
  height: 10px;
}

.tabs {
  padding-top: 20px;
  padding-left: 10px;
  position: relative;
  :deep .query-boxes {
    position: absolute;
    right: 12px;
    top: 47px;
    width: 42%;
  }
  :deep .advanced-query-box {
    width: 98%;
    margin-left: 16px;
  }
}

:deep .el-tabs__nav {
  div:last-of-type {
    margin-left: 60px;
    color: #D7D7D7;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: -30px;
      top: 8px;
      width: 1px;
      height: 20px;
      background-color: #D7D7D7;
    }
  }
}
:deep .el-tabs__nav-scroll {
  &::after {
    background-color: #fff;
    width: 0 !important;
  }
}

.button-line {
  padding-left: 20px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 4% 82% 15%;
  .delete {
    width: 75px;
    margin-left: 20px;
  }
}

.list-content {
  margin-top: 20px;
  margin-left: 20px;

  .title {
    display: grid;
    grid-template-columns: 3% 88% 5%;
    background-color: $background-gray;
    width: 98%;
    .all-checkbox {
      margin-left: 10px;
      margin-top: 20px;
    }
  }

  ul {
    padding-left: 0px;
    width: 98%;
  }
  .list-item {
    display: grid;
    grid-template-columns: 2.5% 89.7% 7%;
    border: 1px solid $border-gray;
    padding: 10px 0 10px 33px;
    margin-bottom: 20px;
  }

  .info {
    position: relative;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 20px;
      background-color: $border-gray;
    }
  }

  .title-label {
    margin-right: 10px;
  }
  .label {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .place {
    margin-right: 10px;
  }
  .yellow-label {
    margin-right: 10px;
  }

  .describe {
    display: grid;
    grid-template-columns: 25% 30% 45%;
  }
  .person {
    color: $title-blue;
  }
  .switch {
    margin-bottom: 15px;
  }
  .delete-text {
    border: none;
    background-color: #fff;
    color: $text-gray;
  }
}
</style>